<script setup>
import { ref } from 'vue'
import authService from '../services/auth.service'
import { useRouter } from 'vue-router'
// import '@/assets/main.css'
// import '@/assets/base.css'
const router = useRouter()
const username = ref('')
const password = ref('')
const error = ref(null)
const isLoading = ref(false)

const handleSubmit = async () => {
  if (!username.value || !password.value) {
    error.value = 'Please enter both username and password'
    return
  }

  isLoading.value = true
  error.value = null

  try {
    await authService.login(username.value, password.value)
    router.push('/chat')
  } catch (err) {
    error.value = err.message || 'Login failed. Please try again.'
  } finally {
    isLoading.value = false
  }
}
</script>

<template>
  <form @submit.prevent="handleSubmit" class="auth-form">
    <h2>码克人教育AI智能体</h2>
    <div v-if="error" class="error-message">{{ error }}</div>
    <div class="form-group">
      <label for="username">用户帐号</label>
      <input
          type="text"
          id="username"
          v-model="username"
          placeholder="请输入用户名"
          required
      />
    </div>
    <div class="form-group">
      <label for="password">用户密码</label>
      <input
          type="password"
          id="password"
          v-model="password"
          placeholder="请输入密码"
          required
      />
    </div>
    <button type="submit" :disabled="isLoading">
      {{ isLoading ? 'Logging in...' : '登录' }}
    </button>
  </form>
</template>

<style scoped>
.auth-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.auth-form h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

button {
  width: 100%;
  padding: 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}

button:hover {
  background-color: #45a049;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.error-message {
  color: #ff4d4f;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #fff1f0;
  border: 1px solid #ffccc7;
  border-radius: 4px;
}
</style>